<!DOCTYPE html>
<html>

<head>
    <script src="./jquery-3.3.1.min.js"></script>
    <meta charset="utf-8">
    <title>捕获与冒泡模型</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
        .red.active { background: red; }
        .blue.active { background: blue; }
        .green.active { background: green; }
        .yellow.active { background: yellow; }
        .orange.active { background: orange; }
        .purple.active { background: purple; }
        div { border: 1px solid black; border-radius: 50%; padding: 20px; background-color: white; display: flex; transition: all 0.5s; }
        .purple { width: 400px; height: 400px; }
    </style>
</head>

<body>
    <div class="red">
        <div class="blue">
            <div class="green">
                <div class="yellow">
                    <div class="orange">
                        <div class="purple">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    let divs = $('div').get() // get() 返回一个 DOM 元素数组
    let n = 0
    for (let i = 0; i < divs.length; i++) {
        divs[i].addEventListener('click', () => {
            setTimeout(() => {
                divs[i].classList.add('active')
            }, n * 500)
            n += 1
        }, true)
    }

    for (let i = 0; i < divs.length; i++) {
        divs[i].addEventListener('click', () => {
            setTimeout(() => {
                divs[i].classList.remove('active')
            }, n * 500)
            n += 1
            if (n === 12) { n = 0 }
        })
    }
</script>
</body>

</html>